<%-- 
    Document   : portfolio-single
    Created on : 24/07/2013, 15:27:04
    Author     : Jean Carlo
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>SIMPLE</title>

        <!-- CSS -->
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
        <!--[if IE 6]>
                <link rel="stylesheet" type="text/css" media="screen" href="css/ie-hacks.css" />
                <script type="text/javascript" src="js/DD_belatedPNG.js"></script>
                <script>
                /* EXAMPLE */
                DD_belatedPNG.fix('*');
        </script>
        <![endif]-->
        <!--[if IE 7]>
                <link rel="stylesheet" href="css/ie7-hacks.css" type="text/css" media="screen" />
        <![endif]-->
        <!--[if IE 8]>
                <link rel="stylesheet" href="css/ie8-hacks.css" type="text/css" media="screen" />
        <![endif]-->
        <!-- ENDS CSS -->

        <!-- prettyPhoto -->
        <link rel="stylesheet" href="js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" />
        <!-- ENDS prettyPhoto -->

        <!-- JS -->
        <script type="text/javascript" src="js/jquery_1.4.2.js"></script>
        <script type="text/javascript" src="js/jqueryui.js"></script>
        <script type="text/javascript" src="js/easing.js"></script>
        <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
        <script type="text/javascript" src="js/tooltip/jquery.tools.min.js"></script>
        <script type="text/javascript" src="js/filterable.pack.js"></script>
        <script type="text/javascript" src="js/prettyPhoto/js/jquery.prettyPhoto.js"></script>
        <script type="text/javascript" src="js/chirp.js"></script>
        <script type="text/javascript" src="js/jquery.tabs/jquery.tabs.pack.js"></script>
        <script type="text/javascript" src="js/custom.js"></script>
        <!-- ENDS JS -->

        <!-- Cufon -->
        <script src="js/cufon-yui.js" type="text/javascript"></script>
        <script src="js/fonts/bebas-neue_400.font.js" type="text/javascript"></script>
        <!-- /Cufon -->

        <!-- superfish -->
        <link rel="stylesheet" type="text/css" media="screen" href="css/superfish-custom.css" /> 
        <script type="text/javascript" src="js/superfish-1.4.8/js/hoverIntent.js"></script> 
        <script type="text/javascript" src="js/superfish-1.4.8/js/superfish.js"></script> 
        <!-- ENDS superfish -->

        <!-- tabs -->
        <link rel="stylesheet" href="css/jquery.tabs.css" type="text/css" media="print, projection, screen" />
        <!-- Additional IE/Win specific style sheet (Conditional Comments) -->
        <!--[if lte IE 7]>
        <link rel="stylesheet" href="css/jquery.tabs-ie.css" type="text/css" media="projection, screen">
        <![endif]-->
        <!-- ENDS tabs -->

    </head>


    <body>

        <!-- HEADER -->
        <div id="header">
            <div class="degree">
                <div class="wrapper">
                    <a href="index.jsp"><img src="img/logo.png" alt="Logo" id="logo" /></a>

                    <!-- search -->
                    <div class="top-search">
                        <form  method="get" id="searchform" action="">
                            <div>
                                <input type="text" value="Search..." name="s" id="s" onfocus="defaultInput(this)" onblur="clearInput(this)" />
                                <input type="submit" id="searchsubmit" value=" " />
                            </div>
                        </form>
                    </div>
                    <!-- ENDS search -->

                    <!-- navigation -->
                    <div id="nav-holder">
                        <ul id="nav" class="sf-menu">
                            <li><a href="index.jsp">HOME</a>
                                <ul>
                                    <li><a href="index-3d.jsp">3D SLIDESHOW</a></li>
                                </ul>
                            </li>
                            <li><a href="about.jsp">FEATURES</a>
                                <ul>
                                    <li><a href="about.jsp">LAYOUT</a></li>
                                    <li><a href="about-styled.jsp">STYLED</a></li>
                                    <li><a href="about-more.jsp">MORE</a></li>
                                    <li><a href="about-toggle.jsp">TOGGLE BOX</a></li>
                                    <li><a href="about-accordion.jsp">ACCORDION</a></li>
                                    <li><a href="appearance.jsp">APPEARANCE</a></li>
                                </ul>
                            </li>
                            <li class="current_page_item"><a href="portfolio.jsp">PORTFOLIO</a></li>
                            <li><a href="gallery.jsp">GALLERY</a>
                                <ul>
                                    <li><a href="gallery.jsp">FOUR COLS</a></li>
                                    <li><a href="gallery-3.jsp">THREE COLS</a></li>
                                    <li><a href="gallery-2.jsp">TWO COLS</a></li>
                                </ul>
                            </li>
                            <li ><a href="blog.jsp">BLOG</a></li>
                            <li><a href="contact.jsp">CONTACT</a></li>
                            <li><a href="staff.jsp">STAFF</a></li>
                            <li><a href="http://luiszuno.com/blog/downloads/simple-template ">DOWNLOAD</a></li>

                        </ul>
                    </div>
                    <!-- ENDS navigation -->

                </div>
                <!-- ENDS HEADER-wrapper -->
            </div>
        </div>
        <!-- ENDS HEADER -->

        <!-- MAIN -->
        <div id="main">
            <!-- wrapper -->
            <div class="wrapper">
                <!-- content -->
                <div class="content">
                    <!-- title -->
                    <div class="title-holder">
                        <span class="title">PORTFOLIO</span>
                        <span class="subtitle">Pellentesque habitant morbi tristique senectus et netus et malesuada fames .</span>
                        <a href="portfolio.jsp" class="link-button"><span>GO BACK TO PORTFOLIO</span></a>
                    </div>
                    <!-- ENDS title -->

                    <!-- page-content -->
                    <div class="page-content">

                        <img src="img/dummies/portfolio-image.gif" alt="Portfolio" class="portfolio-image"/>
                        <!-- holder -->
                        <div class="holder">
                            <!-- portfolio-gallery -->
                            <div class="mini-gallery-holder">
                                <ul class="mini-gallery">
                                    <li><a href="img/dummies/feature-image.gif" rel="prettyPhoto[gal]"><img src="img/dummies/mini-gallery.gif" alt="Thumb"/></a></li>
                                    <li><a href="img/dummies/feature-image.gif" rel="prettyPhoto[gal]"><img src="img/dummies/mini-gallery.gif" alt="Thumb"/></a></li>
                                    <li><a href="img/dummies/feature-image.gif" rel="prettyPhoto[gal]"><img src="img/dummies/mini-gallery.gif" alt="Thumb"/></a></li>
                                    <li><a href="img/dummies/feature-image.gif" rel="prettyPhoto[gal]"><img src="img/dummies/mini-gallery.gif" alt="Thumb"/></a></li>
                                    <li><a href="img/dummies/feature-image.gif" rel="prettyPhoto[gal]"><img src="img/dummies/mini-gallery.gif" alt="Thumb"/></a></li>
                                    <li><a href="img/dummies/feature-image.gif" rel="prettyPhoto[gal]"><img src="img/dummies/mini-gallery.gif" alt="Thumb"/></a></li>
                                    <li><a href="img/dummies/feature-image.gif" rel="prettyPhoto[gal]"><img src="img/dummies/mini-gallery.gif" alt="Thumb"/></a></li>
                                    <li><a href="img/dummies/feature-image.gif" rel="prettyPhoto[gal]"><img src="img/dummies/mini-gallery.gif" alt="Thumb"/></a></li>
                                    <li><a href="img/dummies/feature-image.gif" rel="prettyPhoto[gal]"><img src="img/dummies/mini-gallery.gif" alt="Thumb"/></a></li>
                                </ul>
                            </div>
                            <!-- ENDS portfolio-gallery -->
                            <!-- portfolio-content -->
                            <div class="portfolio-content">
                                <div class="name custom">PROJECT NAME </div>
                                <div class="sub-name custom">UT LAOREET DOLORE LOREMP ISOMPSU LDOS </div>
                                <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt.</p>

                                    <p>Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt.</p></div>
                                <a href="#" class="link-button"><span>VISIT WEBSITE</span></a>
                            </div>
                            <!-- ENDS portfolio-content -->
                        </div>
                        <!-- ENDS holder -->
                        <!-- related-projects -->
                        <div class="related-projects">
                            <h1>RELATED PROJECTS</h1>
                            <ul class="related-projects-list">
                                <li>
                                    <a href="#"><img src="img/dummies/related-projects.gif" alt="Thumb"/></a>
                                    <div>Lorem ipsum</div>
                                </li>
                                <li>
                                    <a href="#"><img src="img/dummies/related-projects.gif" alt="Thumb"/></a>
                                    <div>Lorem ipsum</div>
                                </li>
                                <li>
                                    <a href="#"><img src="img/dummies/related-projects.gif" alt="Thumb"/></a>
                                    <div>Lorem ipsum</div>
                                </li>
                                <li>
                                    <a href="#"><img src="img/dummies/related-projects.gif" alt="Thumb"/></a>
                                    <div>Lorem ipsum</div>
                                </li>
                                <li>
                                    <a href="#"><img src="img/dummies/related-projects.gif" alt="Thumb"/></a>
                                    <div>Lorem ipsum</div>
                                </li>
                                <li>
                                    <a href="#"><img src="img/dummies/related-projects.gif" alt="Thumb"/></a>
                                    <div>Lorem ipsum</div>
                                </li>
                            </ul>
                        </div>
                        <!-- ENDS related-projects -->							

                    </div>
                    <!-- ENDS page-content -->	


                </div>
                <!-- ENDS content -->

                <!-- twitter -->
                <div class="twitter-reader">
                    <script>Chirp({user:"ansimuz",max:1})</script></div>
            </div>
            <!-- ENDS twitter -->

        </div>
        <!-- ENDS main-wrapper -->


        </div>		
        <!-- ENDS MAIN -->	

        <!-- FOOTER -->
        <div id="footer">
            <div class="degree">
                <!-- wrapper -->
                <div class="wrapper">
                    <!-- social bar -->
                    <div id="social-bar">

                        <ul class="follow-us">
                            <li><span>FOLLOW US</span></li>
                            <li ><a href="#" class="icon-32 twitter-32 social-tooltip" title="Follow our tweets">link</a></li>
                            <li ><a href="#" class="icon-32 vimeo-32 social-tooltip" title="Lorem ipsum dolor">link</a></li>
                            <li ><a href="#" class="icon-32 dribbble-32 social-tooltip" title="Lorem ipsum dolor">link</a></li>
                            <li ><a href="#" class="icon-32 flickr-32 social-tooltip" title="Lorem ipsum dolor">link</a></li>
                            <li ><a href="#" class="icon-32 facebook-32 social-tooltip" title="Lorem ipsum dolor">link</a></li>

                        </ul>
                    </div>
                    <!-- ENDS social bar -->
                    <!-- footer-cols -->
                    <ul class="footer-cols">
                        <li class="col">
                            <h6>CATEGORIES</h6>
                            <ul>
                                <li><a href="#">WEBDESIGN</a></li>
                                <li><a href="#/">WORDPRESS</a></li>
                                <li><a href="#">PHOTO</a></li>
                                <li><a href="#">CODING</a></li>
                            </ul>
                        </li>
                        <li class="col">
                            <h6>PAGES</h6>
                            <ul>
                                <li><a href="#">HOW TO CUSTOMIZE THIS TEMPLATE</a></li>
                                <li><a href="#">5 ESSENTIALS RULES</a></li>
                                <li><a href="#">LOREM IPSUM DOLOR</a></li>
                            </ul>
                        </li>
                        <li class="col">
                            <h6>FREE TEMPLATES &amp; THEMES</h6>
                            <p>Get tons of free high quality templates at <a href="http://templatecreme.com">Template Creme</a>.</p>
                        </li>	
                        <li class="col">
                            <h6>PAGES</h6>
                            <ul>
                                <li><a href="#">HOW TO CUSTOMIZE THIS TEMPLATE</a></li>
                                <li><a href="#">5 ESSENTIALS RULES</a></li>
                                <li><a href="#">LOREM IPSUM DOLOR</a></li>
                            </ul>
                        </li>		
                    </ul>
                    <!-- ENDS footer-cols -->
                </div>
                <!-- ENDS footer-wrapper -->
            </div>
        </div>
        <!-- ENDS FOOTER -->


        <!-- BOTTOM -->
        <div id="bottom">
            <!-- wrapper -->
            <div class="wrapper">
                SIMPLE THEME by <a href="http://www.luiszuno.com" >luiszuno.com</a>
            </div>
            <!-- ENDS bottom-wrapper -->
        </div>
        <!-- ENDS BOTTOM -->

        <!-- start cufon -->
        <script type="text/javascript"> Cufon.now(); </script>
        <!-- ENDS start cufon -->

    </body>
</html>